<template>
  <el-row>
    <el-col :span="24">
      <el-input
        v-model="search[0].value"
        placeholder="搜索"
        class="input-with-select"
        @keyup.enter="refreshModList"
      >
        <template #prepend>
          <el-select
            v-model="search[0].type"
            class="el-select"
            style="width: 140px"
          >
            <el-option label="搜索名称" value="0"></el-option>
            <el-option label="搜索IP" value="1"></el-option>
          </el-select>
        </template>
        <template #append>
          <el-button @click="refreshModList" icon="Search" />
        </template>
      </el-input>
    </el-col>
    <el-col :span="24">
      <el-select
        clearable
        v-model="search[1].value"
        class="el-select"
        style="width: 140px"
        placeholder="选择类型"
      >
        <el-option label="个人服" value="0"></el-option>
        <el-option label="官服" value="1"></el-option>
      </el-select>
      <el-select
        clearable
        v-model="search[2].value"
        class="el-select"
        style="width: 140px"
        placeholder="选择状态"
      >
        <el-option label="下架" value="0"></el-option>
        <el-option label="已发布" value="1"></el-option>
        <el-option label="隐藏" value="2"></el-option>
      </el-select>
      <el-select
        clearable
        v-model="search[3].value"
        class="el-select"
        style="width: 140px"
        placeholder="选择版本"
      >
        <el-option
          v-for="v in server_version_list"
          :label="v.name"
          :value="v.version"
        ></el-option>
      </el-select>
    </el-col>
  </el-row>

  <div v-loading="isLoadingData">
    <el-table :data="mod_list" stripe style="width: 100%">
      <el-table-column prop="sd_id" label="ID" width="80" />
      <el-table-column prop="name" label="服名称" width="180" />
      <el-table-column prop="version" label="版本" width="180" />
      <el-table-column prop="ip" label="地址" width="180" />
      <el-table-column prop="uname" label="发布者" width="180" />
      <el-table-column prop="time" label="发布时间" width="180" />
      <el-table-column prop="stat" label="状态" width="180">
        <template #default="scope">
          <el-tag size="small" :type="mod_list[scope.$index].stat_data.type">
            {{ mod_list[scope.$index].stat_data.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button
            size="small"
            link
            type="primary"
            class="buttons"
            @click="toView(scope.$index)"
            >查看页面</el-button
          >
          <el-button
            size="small"
            type="primary"
            class="buttons"
            @click="searchUser(mod_list[scope.$index].uid)"
            >查看用户</el-button
          >
          <el-button
            size="small"
            type="danger"
            class="buttons"
            @click="showLockItem(scope.$index)"
          >
            发布/下架
          </el-button>

          <el-button
            size="small"
            type="danger"
            class="buttons"
            @click="showLockItem(scope.$index, 2)"
          >
            {{ mod_list[scope.$index].stat == 2 ? '取消' : '' }}移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination
    background
    v-model:current-page="page"
    :page-size="limit"
    layout="prev, pager, next, jumper"
    :total="total"
    style="margin: 2rem 0"
  />

  <!--锁定资源弹窗-->
  <dialog-confirm
    title="提示"
    v-model:visible="dialogShow.lockMod"
    :loading="isLocking"
    @submit="lockItem()"
    @close="setItem()"
  >
    <span>
      <span>
        是否{{ activeItem.stat == 0 ? '下架' : '发布' }}资源[ID:{{
          activeItem.sd_id
        }}]
      </span>
      <span style="color: #008ac5">{{ activeItem.name }}</span>
    </span>
  </dialog-confirm>
</template>
<script lang="ts">
import DialogConfirm from '@comps/dialogs/confirm.vue'
import DialogExamine from '@comps/dialogs/examine.vue'
import Method from '@/globalmethods.ts'
import Cfg from '../../../config/config'
import { ElMessage } from 'element-plus'
import { watch } from 'vue'
import { res, serverItem, stat_data } from '../type.ts'

export default {
  name: 'admin-mod',
  components: { DialogExamine, DialogConfirm },
  data() {
    return {
      server_version_list:
        Cfg.userInfo.global_mod_data_list.server_version_list,
      stat_filter: -1,
      page: 1,
      limit: 10,
      total: 0,
      isLoadingData: false,
      isLockAccountDialogVisible: false,
      isLocking: false,
      isInjecting: false,
      isPassing: false,
      dialogShow: {
        hideMod: false,
        lockMod: false,
      },
      statName: [
        {
          name: '下架',
          type: 'danger',
        },
        {
          name: '已发布',
          type: 'success',
        },
        {
          name: '隐藏',
          type: 'warning',
        },
      ] as stat_data[],
      search: [
        {
          value: '',
          type: '0',
        },
        {
          value: '',
          type: '2', // 等级
        },
        {
          value: '',
          type: '3', // 状态
        },
        {
          value: '',
          type: '4', // 版本
        },
      ],

      activeItem: <serverItem>{},
      mod_list: <serverItem[]>[],
    }
  },
  methods: {
    /**
     * 资源列表刷新
     */
    refreshModList() {
      this.isLoadingData = true
      let payLoad = {
        page: this.page,
        limit: this.limit,
        conditions: this.search
          .map((x: any) => {
            if (x.value !== '') {
              x.type = Number(x.type)
              return x
            }
          })
          .filter(Boolean),
      }
      Method.api_post('/admin/server_list', payLoad).then((response) => {
        this.isLoadingData = false
        let res = response.data as res
        if (res.code == 200) {
          if (this.page == 1) this.total = res.sum
          res.data.forEach((x: serverItem) => {
            x.time = Method.formatNormalTime(<number>x.time)
            x.stat_data = this.statName[x.stat]
          })
          this.mod_list = res.data
        }
      })
    },
    toView(index: number) {
      let id = this.mod_list[index].mod_id
      this.$router.push(`/ModDetail/${id}`)
    },
    setModListFilter(stat_filter = -1) {
      this.page = 1
      this.stat_filter = stat_filter
      this.refreshModList()
    },

    showLockItem(index: number, state?: number) {
      this.dialogShow.lockMod = true
      this.activeItem = this.mod_list[index]
      if (state) {
        this.activeItem.stat = state
      } else {
        this.activeItem.stat = this.activeItem.stat_data.name == '下架' ? 1 : 0
      }
    },
    setItem() {
      this.activeItem.stat = this.activeItem.stat_data.name == '下架' ? 1 : 0
    },

    lockItem() {
      this.isLocking = true
      let id = this.activeItem.sd_id
      let stat = this.activeItem.stat
      Method.api_post('/admin/update_server_state', {
        sd_id: id,
        stat: stat,
      }).then((response) => {
        this.isLocking = false
        let res = <res>response.data
        if (res.code == 200) {
          this.activeItem.stat = stat
          this.activeItem.stat_data = this.statName[stat]
          this.dialogShow.lockMod = false
          ElMessage(this.statName[stat].name + '成功')
        } else {
          ElMessage(res.msg)
        }
      })
    },
    /**
     * 查询用户
     */
    searchUser(id: number) {
      this.$router.push({
        path: '/admin/account',
        query: {
          search: String(id),
          search_type: 0,
        },
      })
    },
  },
  mounted() {
    this.refreshModList()
    watch(
      () => this.page,
      () => {
        this.refreshModList()
      },
    )
  },
}
</script>

<style lang="css" scoped>
.buttons {
  margin: 4px;
}
</style>
